<template>
  <div class="g-page-container">
    <PageHeader title="销售管道&漏斗分析" />
    <div class="g-content-container spin-position">
      <LostSearchForm ref="search-form" @search="loadTableList(true)" />
      <LostSaleBox
        :conduit-bar-data="conduitBarData"
        :form-params="getSearchForm()"
        :funnel-bar-data="funnelBarData"
        @pageUpdate="pageUpdate"
      />
      <Spin :spinning="loading" top="16%" />
    </div>
  </div>
</template>

<script>
import LostSearchForm from '@/components/search/lostSearchForm.vue';
import LostSaleBox from './components/lostSaleBox.vue';

import {
  postSalesChannelReport,
  postSalesFunnelReport,
} from '@/api/analysisEcharts.js';
import monent from 'moment';
// import { downloadFile } from '@/utils/index.js';

export default {
  components: {
    LostSearchForm,
    LostSaleBox,
  },
  data() {
    return {
      loading: false,
      conduitBarData: [],
      funnelBarData: [],
    };
  },
  computed: {},
  created() {
    this.loadTableList();
  },
  methods: {
    pageUpdate() {
      this.loadTableList(true);
    },
    getSearchForm() {
      const form = this.$refs['search-form']?.getSearchParams || {};
      console.log(form);
      let { startCreateTime, endCreateTime } = form;
      form.startCreateTime = startCreateTime
        ? `${monent(startCreateTime).format('YYYY-MM-DD')} 00:00:00`
        : '';
      form.endCreateTime = endCreateTime
        ? `${monent(endCreateTime).format('YYYY-MM-DD')} 23:59:59`
        : '';
      return { ...form };
    },
    async loadTableList(val) {
      let formData = {};
      if (val) {
        formData = this.getSearchForm();
      } else {
        formData = {
          startCreateTime: `${monent(new Date())
            .subtract(6, 'months')
            .format('YYYY-MM-DD')} 00:00:00`,
          endCreateTime: `${monent(new Date()).format('YYYY-MM-DD')} 23:59:59`,
        };
      }

      // 校验时间是否只输入一个
      if (!formData.startCreateTime && formData.endCreateTime) {
        this.$message.error('请选择开始时间');
        return;
      }
      if (formData.startCreateTime && !formData.endCreateTime) {
        this.$message.error('请选择结束时间');
        return;
      }

      if (!formData.startCreateTime && !formData.endCreateTime) {
        this.$message.error('请选择开始时间和结束时间');
        return;
      }

      this.loading = true;
      try {
        await this.conduitBarList(formData);
        await this.funnelBarList(formData);
        this.loading = false;
      } catch (err) {
        console.log(err);
        this.loading = false;
      }
    },
    async conduitBarList(data) {
      try {
        const result = await postSalesChannelReport(data);
        this.conduitBarData = result?.data?.data;
      } catch (err) {
        console.log(err);
      }
    },
    async funnelBarList(data) {
      try {
        const result = await postSalesFunnelReport(data);
        this.funnelBarData = result?.data?.data;
      } catch (err) {
        console.log(err);
      }
    },
    // async exportCallback() {
    //   const data = JSON.parse(JSON.stringify(this.exportData));
    //   const res = await postExportPriceParameterDetail([...data]);
    //   await downloadFile(res.data, res.filename || '价格台账明细.xls');
    // },
  },
};
</script>

<style lang="less" scoped>
.spin-position {
  position: relative;
}
.table-container {
  padding: 15px 20px;
  // height: calc(100vh - 60px);
  box-sizing: border-box;
}
.list-container {
  // height: calc(100% - 110px);
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  /deep/.poros-tabs-nav .poros-tabs-tab {
    margin: 0;
    padding: 12px 32px 12px 0;
  }
  /deep/ .poros-tabs-nav .poros-tabs-tab-active {
    color: #1740dc;
  }
  /deep/.poros-tabs-ink-bar {
    width: 48px !important;
  }
}
</style>
